<script setup lang="ts">
import { usePriceComponentStore } from '@/stores/priceComponentStore';
import { computed } from 'vue';

const priceComponentStore = usePriceComponentStore();

const sum = computed(() =>
  Object.values(priceComponentStore.components).reduce<number>(
    (sum, component) => {
      if (component.isNew) {
        return sum;
      }

      return sum + Number(component.value);
    },
    0
  )
);
</script>

<template>
  <div class="price-components-sum">
    <div class="price-components-sum__sum" :title="sum">
      Total: {{ sum.toFixed(2) }} EUR/kg
    </div>
  </div>
</template>

<style scoped lang="scss">
.price-components-sum {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;

  font-size: 25px;
  font-weight: bold;
}
</style>
